<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./css/vant.css" />
    <script src="./js/amfe-flexible.js"></script>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./js/vue.min.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js//html2canvas.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?326606a7db35ff097652dee25164bbd3";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!-- <script src="./js//variable.js"></script> -->

    <!-- 引入样式文件 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> -->
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script> -->
    <title>分享福利</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .app {
            background-color: #FDE4EC;

        }

        .con {
            width: 10rem;
            font-size: 0;
            margin: 0 auto;
            background-color: #DEFAF8;
            overflow: hidden;
        }

        .con-header {
            margin: 0 auto;
            background-image: url(https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/2022071101.png);
            width: 9.32rem;
            height: 12.13rem;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;
        }

        .con-header-tips {
            position: absolute;
            top: 2.8rem;
            right: 1.1rem;
            height: .29rem;
            font-size: .32rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #08D8CA;
        }

        .rules_popup {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: fixed;
            z-index: 999;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            /* background-color: red; */

        }

        .rules_box {
            width: 9.52rem;
            height: 12.57rem;

            padding: 0 1rem;
            box-sizing: border-box;
            background-image: url(https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/2022071102.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .rules_box_text {

            font-size: .32rem;
            font-weight: 400;
            color: #121212;
            margin-top: .5rem;
            line-height: .50rem;
        }

        .rules_box_text:last-child {
            margin-bottom: .5rem;
        }

        .share_result_1 {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: .40rem;
        }

        .auto {
            overflow: auto;
            margin-top: 2.08rem;
            height: 9.52rem;
        }

        /* .share_result_1:first-child { */
        /* padding-top: 2.08rem; */
        /* } */

        .share_line {
            width: .65rem;
            height: .03rem;
            border-top: 1px solid #08D8CA;
        }

        .share_tip {
            font-size: .4rem;
            font-weight: 500;
            color: #08D8CA;
            margin: 0 .34rem;
        }

        .img-icon {
            height: .53rem;
            width: .53rem;
            margin-top: .45rem;
        }

        .con-header-btn {
            width: 6.16rem;
            height: 1rem;
            background: #07D8CD;
            border-radius: .16rem;
            font-size: .37rem;
            color: #fff;
            text-align: center;
            line-height: 1rem;
            margin-top: 10.09rem;
            margin-left: 1.6rem;
        }

        .con-sec {
            width: 8.69rem;
            height: 4.77rem;
            background: #fff;
            margin-top: .49rem;
            margin-left: .63rem;
            overflow: hidden;
        }

        .con-sec-first {
            display: flex;
            justify-content: center;
            margin-top: .92rem;
        }

        .con_line {
            width: .81rem;
            height: .01rem;
            /* line-height: 1rem; */
            border-top: 1px solid #121212;
        }

        .con-sec-size {
            font-size: .45rem;
            /* width: 197rem; */
            color: #121212;
            line-height: 0;
            margin: 0 .43rem;
        }

        .con-sec-sec {
            display: flex;
            margin-top: 1.24rem;
        }

        .con-sec-line {
            /* width: 1px; */
            height: .60rem;
            border: 1px solid #A9A6A6;
            margin-top: .24rem;
        }

        con-sec-sec-box {
            width: 1.69rem;
            text-align: center;
        }

        .con-sec-sec-box:first-child {
            margin-left: 1.8rem;
            margin-right: .88rem;
        }

        .con-sec-sec-box:last-child {
            margin-left: .8rem;
            /* margin-right: ; */
        }

        .con-sec-sec-box div:first-child {
            font-size: .8rem;
            text-align: center;
        }

        .con-sec-sec-box div:last-child {
            font-size: .35rem;
            margin-top: .4rem;
            text-align: center;
        }

        .con-last {
            width: 8.69rem;
            /* height: 7.33rem; */
            background: #FFFFFF;
            border-radius: .19rem;
            margin: .51rem .68rem .65rem .63rem;
            overflow: hidden;
            min-height: 7.33rem;
        }

        .con-last-first {
            margin-top: .93rem;
            text-align: center;
        }

        .con-last-first img {
            width: 1.92rem;
            height: 2.01rem;
        }

        .con-last-font {
            margin-top: .36rem;
            font-size: .35rem;
            text-align: center;
            color: #7B7A7A;
        }

        .con-last-btn {
            width: 3.11rem;
            height: .75rem;
            background: #07D8CD;
            color: #fff;
            line-height: .75rem;
            font-size: .37rem;
            border-radius: .37rem;
            margin: .72rem auto;
        }

        .con-last-sec {
            height: 8.69rem;
            margin-top: .72rem;
            /* overflow: auto; */
        }

        .con-last-li {
            display: flex;
            justify-content: space-around;
            font-size: .37rem;
            line-height: .89rem;
            margin-top: .42rem;
        }

        .con-last-li:last-child {
            margin-bottom: .8rem;
        }

        .con-last-sec-left {
            display: flex;
        }

        .con-last-sec-right {
            display: flex;
        }

        .con-last-sec-right .font {
            margin-right: .23rem;
        }

        .con-last-sec-right .btn {
            /* margin-right: .23rem; */
            width: 1.61rem;
            height: .49rem;
            background: #07D8CD;
            border-radius: .25rem;
            color: #fff;
            font-size: .27rem;
            line-height: .49rem;
            text-align: center;
        }

        .con-last-li img {
            width: .88rem;
            height: .89rem;
            margin-right: .17rem;
        }

        /* #img-icon1{
            margin-top: -1.55rem;
        } */
        .pop-con {
            width: 8.3rem;
            height: 13.83rem;
            background-image: url(https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/2022071104.png);
            background-color: #fff;
            /* background-image: url('img/2022071104.png'); */
            background-size: 100% 100%;
        }

        .pop-img {
            text-align: center;
            margin-top: 8.48rem;
            margin-left: 3rem;
            width: 2.32rem;
            height: 2.32rem;
        }

        .pop-btn {
            margin: 0 auto;
            margin-top: 1.36rem;
            width: 4.72rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            background: #08D8CA;
            font-size: .43rem;
            color: #fff;
        }

        .pop-con1 {
            width: 8.3rem;
            /* width: 100%; */
            height: 14.83rem;
            /* height: 100%; */
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="con">
            <div class="con-header">
                <div class="con-header-tips" @click="isRules=true">活动规则</div>
                <!-- <div class="con-header-btn" @click="share">邀请好友</div> -->
                <div class="con-header-btn" @click="copyClick">邀请好友</div>
            </div>

            <div class="con-sec">
                <div class="con-sec-first">
                    <div class="con_line"></div>
                    <div class="con-sec-size">我的成就</div>
                    <div class="con_line"></div>
                </div>
                <div class="con-sec-sec">
                    <div class="con-sec-sec-box">
                        <div> {{num||0}} 人</div>
                        <div>已成功邀请</div>
                    </div>
                    <div class="con-sec-line"></div>
                    <div class="con-sec-sec-box">
                        <div> {{priceTotal||0}} 元</div>
                        <div>已获得优惠券</div>
                    </div>
                </div>
            </div>
            <div class="con-last">
                <div class="con-sec-first">
                    <div class="con_line"></div>
                    <div class="con-sec-size">邀请记录</div>
                    <div class="con_line"></div>
                </div>
                <div v-if="recommandList.length === 0" class="con-last-first">
                    <img src="https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/fission3.png" alt="">
                    <div class="con-last-font">暂时没有邀请记录</div>
                    <!-- <div class="con-last-btn" @click="goShare">去邀请</div> -->
                    <div class="con-last-btn" @click="copyClick">去邀请</div>
                </div>
                <!-- https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/2022071103.png -->
                <div class="con-last-sec" v-else>
                    <div v-for="(item, index) in recommandList" :key="index" class="con-last-li" @click="goCoupon">
                        <!-- {{item.name}} -->
                        <div class="con-last-sec-left">
                            <img src="https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/2022071103.png" alt="">
                            <div>{{item.phone}}</div>
                        </div>
                        <div class="con-last-sec-right">
                            <div class="font">+{{price}}元</div>
                            >
                        </div>
                        <!-- <div class="con-last-sec-right" v-else>
                            <div class="btn">提醒下单</div>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- 弹窗区域 -->
            <div class="rules_popup" v-show="isRules">
                <div class="rules_box">
                    <div class="auto">
                        <div class="share_result_1">
                            <div class="share_line"></div>
                            <div class="share_tip">活动规则</div>
                            <div class="share_line"> </div>
                        </div>
                        <div class="rules_box_text">
                            1）被邀请人必须是新人 <br />
                            2）同一用户只能接受一次邀请 <br />
                            3）仅限大陆手机号注册用户可使用此功能。被邀请人成功下单后，邀请人方可领取邀请有礼优惠券 <br />
                        </div>
                        <div class="share_result_1">
                            <div class="share_line"></div>
                            <div class="share_tip">优惠券使用规则</div>
                            <div class="share_line"> </div>
                        </div>
                        <div class="rules_box_text">
                            1）邀请人优惠券：20元优惠券（此优惠券不可用于皮具，奢侈品，奢侈品箱包，居家）<br />
                            2）被邀请人优惠券：1张5折洗、2张7折洗，3张8.5折洗（此优惠券不可用于皮具，奢侈品，奢侈品箱包，居家）<br />
                            3）优惠券有效期：5折洗1天，7折洗15天，8.5折洗15天，20元优惠券30天，过期未使用自动失效，优惠券具体面额及有效期以实际到账为准，请及时用券<br />
                            4）优惠券金额不可用于提现，转账或其a他用途，优惠券有效期过期后发生交易退款，已使用的优惠券金额不予退还<br />
                        </div>
                        <div class="share_result_1">
                            <div class="share_line"></div>
                            <div class="share_tip">成功领取方式</div>
                            <div class="share_line"> </div>
                        </div>
                        <div class="rules_box_text">
                            1）被邀请人在邀请人发送的邀请有礼页面完成授权注册才算新用户，此时被邀请人可以直接领券下单<br />
                            2）下单成功后，若用户未发生退款行为，邀请人方可领券。若被邀请人未下单或产生退款行为，邀请人则无法成功领取优惠券<br />
                            3）成功邀请一位新人可获得一张优惠券（即邀请N人可获得N张优惠券）<br />
                        </div>
                        <div class="share_result_1">
                            <div class="share_line"></div>
                            <div class="share_tip">其他说明</div>
                            <div class="share_line"> </div>
                        </div>
                        <div class="rules_box_text">
                            1）活动过程中，凡以不正当手段（作弊，违规账号，恶意套现，虚假交易，扰乱系统，实施网络攻击等）参与本次活动的用户，24洗衣有权终止其参与活动，并取消其获券资格<br />
                            2）如遇不可抗力（包括但不限于重大灾害事件、活动受政府机关指令需要停止举办或调整的、活动中存在大面积行为、活动遭受严重网络攻击或因系统故障导致活动领券资格大批量异常，活动不能正常进行的),24洗衣可取消，修改或暂停活动<br />
                            3）活动中有任何疑问，即日起可进入24洗衣小程序—个人中心—我的客服咨询反馈<br />
                        </div>
                    </div>
                </div>
                <img class="img-icon" src="./img/guanbi.png" mode="" @click="isRules=false"></img>
            </div>
            <div class="rules_popup" v-show="recommandStatus" id="saveImg">
                <!-- <div class="pop-con">
                    <img :src="imgSrc" alt="" class="pop-img" crossOrigin="Anonymous"></img>
                    <div class="pop-btn" @click="save">
                        保存图片
                    </div>
                </div> -->
                <div class="pop-con" id="pop1" v-if="flag1">
                    <img :src="imgSrc" alt="" class="pop-img" crossOrigin="Anonymous"></img>
                    <div class="pop-btn">
                        长按保存图片
                    </div>
                </div>
                <img v-else class="pop-con1" id="img1" :src="imgSrc1"></img>
                <img class="img-icon" id="img-icon1" data-html2canvas-ignore src="./img/guanbi.png" mode=""
                    @click="recommandStatus=false"></img>
            </div>
        </div>


    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    isRules: false,
                    recommandStatus: false,
                    flag1: false,
                    imgSrc1: '',
                    imgSrc: '',
                    count: '',
                    priceTotal: '',
                    price: '',
                    num: '',
                    recommandList: [],
                    invitee: ''
                }
            },
            mounted() {
                // // 调用函数组件，弹出一个 Toast
                // vant.Toast('提示');
                let _this = this
                let recommandId = localStorage.getItem('recommandId')
                // console.log(recommandId);
                if (!recommandId || !localStorage.getItem('recommandStatus')) {
                    vant.Toast.fail('请先登录');
                    setTimeout(() => {
                        window.location.href = 'https://m.24tidy.com/login.html?islogin=islogin';
                    }, 2000);
                    return
                }
                let url = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://m.24tidy.com/tidyCoupon/activity/coupon20220712/index.html?recommandId=${recommandId}`
                this.img2base64(url, 'Anonymous').then(function (res) {
                    console.log(res);
                    _this.imgSrc = res;
                });
                this.getData()
            },
            computed: {
                shareMoney() {
                    return this.count * 20
                }
            },
            watch: {
            },
            methods: {
                getCookie(cookie_name) {
                    var allcookies = document.cookie;
                    //索引长度，开始索引的位置
                    var cookie_pos = allcookies.indexOf(cookie_name);


                    // 如果找到了索引，就代表cookie存在,否则不存在
                    if (cookie_pos != -1) {
                        // 把cookie_pos放在值的开始，只要给值加1即可
                        //计算取cookie值得开始索引，加的1为“=”
                        cookie_pos = cookie_pos + cookie_name.length + 1;
                        //计算取cookie值得结束索引
                        var cookie_end = allcookies.indexOf(";", cookie_pos);
                        if (cookie_end == -1) {
                            cookie_end = allcookies.length;
                        }
                        //得到想要的cookie的值
                        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
                    }
                    return value;
                },
                copyClick() {
                    const input = document.createElement('input')
                    document.body.appendChild(input)
                    let url = `https://m.24tidy.com/tidyCoupon/activity/coupon20220712/index.html?recommandId=${localStorage.getItem('recommandId')}`
                    input.setAttribute('value', url)
                    input.select()
                    if (document.execCommand('copy')) {
                        // IOS不支持此方法，所以复制不成功
                        document.execCommand('copy')
                    }
                    document.body.removeChild(input)
                    console.log('复制成功！')
                    vant.Toast.success('链接复制成功,去邀请吧！');
                },
                goCoupon() {
                    // https://m.24tidy.com/coupon.html
                    window.location.href = `https://m.24tidy.com/coupon.html`;
                },
                getData() {
                    let _this = this
                    $.ajax({
                        type: 'POST',
                        url: 'https://m.24tidy.com/action/api.php',
                        data: {
                            'action': 'getRecommand',
                            'recommandId': localStorage.getItem('recommandId'),
                            'token': 'z24heshiyigetidywannengto.comken'
                        },
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                            if (data.code == 0) {

                            } else if (data.code == 1) {
                                // 操作成功
                                _this.num = data.data.num
                                _this.price = data.data.price
                                _this.priceTotal = data.data.priceTotal
                                _this.recommandList = data.data.recommandList
                            }
                        },
                        error: function (data) {
                            //console.log(data);
                            // $.toast('操作失败，请重试');
                        },
                    });
                },
                // 将图片转为base64格式
                img2base64: function (url, crossOrigin) {
                    return new Promise(resolve => {
                        const img = new Image();

                        img.onload = () => {
                            const c = document.createElement('canvas');

                            c.width = img.naturalWidth;
                            c.height = img.naturalHeight;

                            const cxt = c.getContext('2d');

                            cxt.drawImage(img, 0, 0);

                            // 得到图片的base64编码数据
                            resolve(c.toDataURL('image/png'));
                        };

                        // 结合合适的CORS响应头，实现在画布中使用跨域<img>元素的图像
                        crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
                        img.src = url;
                    });
                },
                save() {
                    html2canvas(document.querySelector('#pop1'), {
                        // allowTaint: true,
                        // useCORS: true
                    }).then(canvas => {
                        console.log(canvas);
                        var url = canvas.toDataURL('image/png');// base64数据
                        // var image = new Image();
                        // image.src = url;
                        let blob = this.base64ToBlob(url);
                        this.imgSrc1 = url
                        this.flag1 = false

                        // var url = canvas.toDataURL('image/png');// base64数据
                        // let blob = this.base64ToBlob(url);
                        // console.log(blob,'msg');
                        // let a = document.createElement("a"); // 生成一个a元素
                        // let event = new MouseEvent("click"); // 创建一个单击事件
                        // let date=new Date()
                        // let time=date.toLocaleDateString()
                        // a.download = time; // 设置图片名称
                        // a.style.display = 'none';
                        // a.href = URL.createObjectURL(blob);
                        // a.dispatchEvent(event); // 触发a的单击事件

                        // let a = document.createElement("a"); // 生成一个a元素
                        // let event = new MouseEvent("click"); // 创建一个单击事件
                        // a.download = '图片名字' || "photo"; // 设置图片名称
                        // a.style.display = 'none';
                        // a.href = url;
                        // a.dispatchEvent(event); // 触发a的单击事件
                        // document.body.appendChild(canvas)
                    });
                },
                base64ToBlob(code) {
                    let parts = code.split(';base64,');
                    let contentType = parts[0].split(':')[1];
                    let raw = window.atob(parts[1]);
                    let rawLength = raw.length;
                    let uInt8Array = new Uint8Array(rawLength);
                    for (let i = 0; i < rawLength; ++i) {
                        uInt8Array[i] = raw.charCodeAt(i);
                    }
                    return new window.Blob([uInt8Array], { type: contentType, name: 'file_' + new Date().getTime() + '.jpg' });
                },
                share() {
                    this.recommandStatus = true
                    this.flag1 = true
                    // return
                    setTimeout(() => {
                        this.save()
                    }, 1000)
                },
                goShare() {
                    console.log('去邀请');
                    this.recommandStatus = true
                },
            },
        });
        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        Vue.use(vant.Lazyload);

    </script>
</body>

</html>